<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\node_modules\vue\dist\vue.js"></script>
</head>
<body>
<div id="app">

    <p>component functional:true 很难用，拿不到methods。</p>
    <p>this.$slots应该是拿到vnode[]，视乎slot内元素的复杂度</p>
    <p>this.$slots.xxx按命名获取</p>

    <r v-bind:level="l" v-bind:f="fvalue">hello vue</r>
    <input v-model="l">
</div>

</body>
<script type="application/javascript">
    Vue.component('makeA',{template:`<a><slot></slot></a>`,});

    Vue.component(
        'r',
        {
            // functional:true,
            template:`<div></div>`,
            props:["level" , "f"],
            methods:{
                _click:function(){
                    console.log("_click");
                }
            },
            render:function(createElement, context) {
                var l = !!this.level ? this.level : 6;
                var vnode_h = createElement(
                    'h' + l,
                    {},
                    this.$slots.default
                );
                var vnode_sth = createElement(
                    'makeA',
                    {
                        attrs: {
                            name: "baidu",
                            href: "http://www.baidu.com",
                            target:"_blank"
                        },
                        style: {
                            color: 'red',
                            fontSize: '14px'
                        },
                        'class': {
                            foo: this.f,
                            bar: this.f
                        }
                    },
                    "baidu"
                );
                var vnode_span = createElement(
                    'span',
                    {
                        on:{
                            click:this._click
                        },
                        //domProps/attrs都作用于当前组件，domProps优先级高。
                        domProps:{
                            "title":"go to baidu",
                            "id":"s"
                        },
                        attrs:{
                            "title1":"go to some where"
                        },
                        key: 'myKey',
                        ref: 'myRef',
                    },
                    [vnode_h , vnode_sth],
                    false
                );
                return vnode_span;
                // return createElement('span',{},'????????????????');
            }
        }
    );

    var app_data = {
        l:6,
        fvalue:true
    };

    var app = new Vue({
        el: '#app',
        data: app_data
    });

</script>
</html>